<% extends "common/msui.html" %>
<% block title %>评价<% endblock %>
<% block body %>
<% set product = _pool['sale.order.line'].get_product_for_evaluation(line_id, evaluation_id) %>
<% set old_evaluation = _pool['sale.order.line'].get_old_evaluation_for_evaluation(line_id, evaluation_id) %>
<% set evaluation_star = _pool['order.evaluation.star.config'].get_config_by_buyer(evaluation_id) %>

<div class="page" id="evaluation" ms-controller="evaluation">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/mshop" >
      <span class="icon icon-left"></span>
      返回
    </a>
    <h1 class="title">评价</h1>
  </header>

  <div class="content" >
    <div class='weixin-flex evaluation-product' ms-if='!need_image'>
      <img ms-attr-src='{{product.url}}' ms-attr-alt='{{product.name}}' />
      <div class='evaluation-product-content'>
        <div>{{product.name}}</div>
        <div>{{product.variants}}</div>
      </div>
    </div>

    <div class='evaluation-description item-input' >
      <!-- <input type='textarea' ms-duplex='description' placeholder='请输入您对该商品的评价' /> -->
      <textarea focus ms-duplex='description' placeholder='请输入您对该商品的评价' ms-attr-readonly='readonly' ></textarea>
    </div>

    <div class='evaluation-star' ms-if='evaluation_star'>
      <ul>
        <li class='weixin-flex' ms-repeat='evaluation_star' >
          <div class='evaluation-star-name'>{{el.name}}</div>
          <ul class='evaluation-star-widget'>
            <li><span class="icon-star-disable" ms-class='icon-star-active:el.level >= 1' ms-click='choose_star(el, 1)' ></span></li>
            <li><span class="icon-star-disable" ms-class='icon-star-active:el.level >= 2' ms-click='choose_star(el, 2)' ></span></li>
            <li><span class="icon-star-disable" ms-class='icon-star-active:el.level >= 3' ms-click='choose_star(el, 3)' ></span></li>
            <li><span class="icon-star-disable" ms-class='icon-star-active:el.level >= 4' ms-click='choose_star(el, 4)' ></span></li>
            <li><span class="icon-star-disable" ms-class='icon-star-active:el.level >= 5' ms-click='choose_star(el, 5)' ></span></li>
          </ul>
        </li>
      </ul>
    </div>

    <div class='evaluation-anonymous'>
      <span>匿名评价</span>
      <div class="label-switch">
        <input type="checkbox" ms-click='anonymous()'>
        <div class="checkbox" />
      </div>
    </div>

    <div class='evaluation-old' ms-if='old_evaluation'>
      <ul>
        <li ms-repeat='old_evaluation' class='evaluation-old-li'>
          <!-- @正翔 自己指向自己似乎有点问题 -->
          <!-- <a ms-attr-href='/mshop/order/evaluation?line_id=1&evaluation_id={{el.id}}' > -->
            <div>{{el.description}}</div>
          <!-- </a> -->
        </li>
      </ul>
    </div>

    <div ms-if='!readonly' class='evaluation-footer' ms-class='evaluation-footer-active:active' ms-click='submit_evaluation()' ><span>提交评价</span></div>

  </div>


  <script type="application/javascript" >
    $(function() {

      var line_id = ${line_id | safe};
      var evaluation_id = ${evaluation_id | safe};
      var product = ${product | tojson | safe};
      var old_evaluation = ${old_evaluation | tojson | safe};
      var evaluation_star = ${evaluation_star | tojson | safe};

      if (evaluation_id) {
        $.ajax({
          url: '/mshop/order/evaluation/get_description',
          data: {evaluation_id: evaluation_id},
          success: function(e) {
            var res = JSON.parse(e);
            evaluation_vm.description = res.description;
            evaluation_vm.is_anonymous = res.is_anonymous;
            evaluation_vm.need_image = res.need_image;
          },
          async: true
        });
      };

      var evaluation_vm = avalon.define({
        $id: 'evaluation',
        readonly: evaluation_id && true,
        need_image: true,
        $computed: {
          active: {
            get: function() {
              if (!this.description) {
                return false;
              };

              return true;
            },
          }
        },
        description: '',
        is_anonymous: false,
        product: product,
        old_evaluation: old_evaluation,
        evaluation_star: evaluation_star,
        anonymous: function() {
          evaluation_vm.is_anonymous = !evaluation_vm.is_anonymous;
        },
        choose_star: function(star, number) {
          // @正翔 不触发计算函数，囧
          if (!evaluation_vm.readonly) {
            star.level = number;
          }
        },
        submit_evaluation: function() {
          if (evaluation_vm.active) {
            evaluation_star = []
            evaluation_vm.evaluation_star.forEach(function(line) {
              evaluation_star.push({id: line.id, level: line.level});
            });

            $.ajax({
              url: '/mshop/order/evaluation/submit',
              data: {line_id: line_id, description: evaluation_vm.description, is_anonymous: evaluation_vm.is_anonymous, stars: JSON.stringify(evaluation_star)},
              success: function(e) {
                window.history.back();
              },
              async: true,
            });
          };
        },
      });

      avalon.scan();

    });


  </script>

<% endblock %>
</div>